<template>
	<div class="prerecord-tts-video-input">
		<template v-if="!textArea">
			<el-form-item :label="label" :required="required" :prop="prop" :rules="rules">
				<el-input :value="value" :disabled="showDetail" @input="updateValue" @change="onChange" :id="prop" :placeholder="placeholder"> </el-input>
				<div class="btn-box">
					<el-input :value="video" :disabled="showDetail" @input="updateVideoValue" @click.native="showVideoTable" @change="onChange" :id="prop" :class="getInputClass"> </el-input>
					<div class="tts-video" v-if="video">
						<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
							<span v-if="video.fileName.length > 10">{{ video.fileName | flieOmit(6, -1) }}</span>
							<span v-else>{{ video.fileName }}</span>
							<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
						</el-button>
						<span class="close" @click="clearVideo">x</span>
					</div>
				</div>
				<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
			</el-form-item>
		</template>
		<!-- 文本域 input -->
		<template v-else>
			<el-form-item :label="label" :required="required" :prop="prop" :rules="rules">
				<!-- <el-input
					:value="value"
					:placeholder="placeholder"
					:disabled="showDetail"
					:minlength="minlength"
					:maxlength="maxlength"
					type="textarea"
					:autosize="{ minRows: 1.1, maxRows: 3 }"
					@input="updateValue"
					@change="onChange(prop)"
					:id="prop"
				></el-input> -->
				<ZcoTextarea
					:value="value"
					:placeholder="placeholder"
					:disabled="showDetail"
					:minlength="minlength"
					:maxlength="maxlength"
					type="textarea"
					:autosize="{ minRows: 1.1, maxRows: 3 }"
					@input="updateValue"
					@change="onChange(prop)"
					:id="prop"
				></ZcoTextarea>
				<div class="btn-box">
					<el-input :value="video" :disabled="showDetail" @input="updateVideoValue" @click.native="showVideoTable" @change="onChange" :id="`${prop}Video`" :class="getInputClass"> </el-input>
					<div class="tts-video" v-if="video">
						<el-button class="choose-btn" @click="showVideoTable" :disabled="showDetail">
							<span v-if="video.fileName.length > 10">{{ video.fileName | flieOmit(6, -1) }}</span>
							<span v-else>{{ video.fileName }}</span>
							<span class="tips" v-if="video.fileName">{{ video.fileName }}</span>
						</el-button>
						<span class="close" @click="clearVideo">x</span>
					</div>
				</div>
				<span class="add-icon" v-if="!showDetail && variableIcon"><el-button icon="el-icon-plus" type="text" @click.prevent="onAddVariable"></el-button></span>
			</el-form-item>
		</template>
	</div>
</template>

<script>
import AIWorkflow from '@/modules/workFlow.js';
import ZcoTextarea from '../components/TinymceTextarea.vue';
export default {
	components: {
		ZcoTextarea
	},
	props: {
		label: {
			type: String,
			default: () => 'AI说'
		},
		placeholder: {
			type: String,
			default: () => '请编辑AI客服播报的话术'
		},
		minlength: {
			type: Number,
			default: () => 1
		},
		maxlength: {
			type: Number,
			default: () => 140
		},
		value: {
			type: String,
			required: true,
			default: () => ''
		},
		video: {
			type: [Object || null],
			default: () => {}
		},
		variableIcon: {
			type: Boolean,
			default: () => true
		},
		required: {
			type: Boolean,
			default: () => false
		},
		prop: {
			type: String,
			default: () => ''
		},
		showDetail: {
			type: Boolean,
			default: () => false
		},
		videoIcon: {
			type: String,
			default: () => ''
		},
		taskId: {
			type: String,
			default: () => '',
			required: false
		},
		textArea: {
			type: Boolean,
			default: () => false
		},
		validateStatus: {
			type: Boolean,
			default: () => true
		},
		rules: {
			type: Object,
			default: () => {}
		}
	},

	computed: {
		isNumber() {
			return prop => {
				return AIWorkflow.getNumberTypeProperty(prop);
			};
		},
		getInputClass() {
			let className = 'normal-icon-video video-input-size';
			if (!this.validateStatus) {
				className = 'error-icon-video video-input-size';
			} else if (this.validateStatus && this.video) {
				className = 'normal-icon-video video-input-hidden';
			}
			return className;
		}
	},
	methods: {
		updateValue(e) {
			this.$emit('input', this.prop, e);
		},
		updateVideoValue() {},
		showVideoTable() {
			this.$emit('showVideoTable', `${this.prop}Video`);
		},
		onAddVariable() {
			this.$emit('onAddVariable', this.prop);
		},
		onChange() {},
		clearVideo() {
			this.$emit('clearVideo', `${this.prop}Video`);
		}
	}
};
</script>

<style></style>
